<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<div th:replace="common/common::html"></div>
<head>
    <meta charset="UTF-8">
    <title th:text="#{main.title}">主页</title>
    <script th:inline="javascript">
        function initBar(){
            var headBar = localStorage.getItem("header-bar")
            $("header").css("display",headBar);
            $("#fold-header-up-id").css("display",headBar)

            var headBar1 = localStorage.getItem("header-bar1")
            $("#fold-header-down-id").css("display",headBar1)

            var headerTop = localStorage.getItem("header-top")
            $(".gd-user-info").css("top",headerTop)
        }
        $(function () {
            initBar()
            $("#user-info-nav-id").click(function (event) {
                event.stopPropagation();
                $(".gd-item-li-hidden").removeClass("gd-item-li-hidden")
            });
            $("body").click(function () {
                $(".nav-bar-ta").addClass("gd-item-li-hidden")
            })

            $(".gd-sys-menu > li.sys-menu-style").click(function () {
                //console.info("li dom list:" + JSON.stringify($(this)))
                $(".gd-sys-menu > li").removeClass("active");
                $(this).addClass("active")


                $(".gt-service-menu").removeClass('in')



                var forid = $(this).attr("forid");
                $("#" + forid).addClass('in')



            })
            $(".gd-sys-menu > li:first").click();

            //修改对话框
            $("#modify-dialog-id").dialog({
                autoOpen : false,
                width : 600,
                modal : true,
                resizable : false,
                title: /*[[#{user.modify.dialog}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            var flag = $("#modify-form-id .form-control[pattern]").checkDom()
                            if(!flag){
                                return
                            }

                            $("#modify-form-id").submit();
                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]
            })

            //修改用户表单
            $("#modify-form-id").ajaxForm({
                dataType: "json",
                success : function(data) {
                    message(data.msg)
                    if(data.success){
                        $("#modify-dialog-id").dialog('close')
                        //location.reload();
                        // query();
                    }
                },
                error : function() {
                    message(/*[[#{common.error}]]*/'');
                }
            })
            //修改用户信息按钮
            $("#update-face-id").click(function () {
                $.ajax({
                    type: 'post',
                    async: false,
                    dataType : 'json',
                    url: /*[[@{/queryUserList}]]*/'',
                    data: [],
                    success: function (data) {
                        //console.info("queryUserListById:" + JSON.stringify(data))
                        if(data){
                            $("#modify-form-id input").each(function (index,item) {
                                var name =  $(item).attr("name");
                                $(this).val(data[name]);
                            })
                            $("#modify-dialog-id").dialog('open')
                        }

                    },
                    error: function(msg){
                        message(/*[[#{common.error}]]*/'');
                    }

                });
            })

        });//ready

        //向上折叠
        function foldUpAction() {
            $("header").css("display","none");
            $("#fold-header-up-id").css("display","none")
            $("#fold-header-down-id").css("display","flex")
            $(".gd-user-info").css("top","-7px")
            localStorage.setItem("header-bar","none")
            localStorage.setItem("header-bar1","flex")
            localStorage.setItem("header-top","-7px")
        }
        //向下展开
        function foldDownAction() {
            $("header").css("display","flex");
            $("#fold-header-up-id").css("display","flex")
            $("#fold-header-down-id").css("display","none")
            $(".gd-user-info").css("top","13px")
            localStorage.setItem("header-bar","flex")
            localStorage.setItem("header-bar1","none")
            localStorage.setItem("header-top","13px")
        }


    </script>
</head>
<style>
    body{
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    header{
        flex-basis: 70px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    header > nav{
        margin-right: 20px;
        display: flex;
        justify-content: space-between;
        width: 100px;
    }

    .gd-user-info{
        position: absolute;
        top:13px;
        right: 10px;
        width: 200px;
    }

    .gd-item-li-hidden{
        display: none !important;
    }

    article{
        flex-grow: 1;
        display: flex;
    }

    #gd-service-menu-id{
        flex-basis: 120px;
    }
    iframe{
        flex-grow: 1;
        border-width: 0;
    }

    .second-menu{
        padding-left: 15px;
    }

    .fade.in{
        display: block;
    }
    .fade{
        display: none;
    }

</style>
<body>
<header>
    <img th:if="${session.lang eq 'en'}" th:src="@{/assets/images/logo_en.png}">
    <img th:if="${session.lang eq 'zh'}" th:src="@{/assets/images/logo_zh.png}">
    <nav>
        <a th:href="@{/(lang=en)}" th:text="#{login.lang.en}"></a>

        <a th:href="@{/(lang=zh)}" th:text="#{login.lang.zh}"></a>
    </nav>
    <div></div>


</header>

<ul class="gd-user-info nav navbar-btn">
    <li>
        <a id="user-info-nav-id"href="#" >
            <i class="glyphicon glyphicon-user"></i>
            <span th:text="${session.niceName}"></span>
        </a>
    </li>
    <li class="gd-item-li-hidden nav-bar-ta">
        <a id="update-face-id" href="#" th:text="#{main.user.modify}">
        </a>
    </li>
    <li class="gd-item-li-hidden nav-bar-ta">
        <a id="updatepwdId" href="#" th:text="#{main.passwd.modify}">
        </a>
    </li>
    <li class="gd-item-li-hidden nav-bar-ta">
        <a th:href="@{/logout}" th:text="#{main.user.logout}"></a>
    </li>
</ul>



<ul class="gd-sys-menu nav nav-tabs">
    <li class="sys-menu-style" th:each="item : ${session.menuList}" th:forid="'menu-' + ${item.getMenuId()}">
        <a href="#">
            <i th:class="${item.getMenuIcon()}"></i>
            <span th:text="${item.getMenuName()}"></span>
        </a>
    </li>

    <li id="fold-header-up-id">
        <a onclick="foldUpAction()" href="#">
            <i class="glyphicon glyphicon-chevron-up"></i>
        </a>
    </li>

    <li id="fold-header-down-id" style="display: none">
        <a onclick="foldDownAction()" href="#">
            <i class="glyphicon glyphicon-chevron-down"></i>
        </a>
    </li>
</ul>

<article>

    <nav id="gd-service-menu-id">
        <ul th:each="item : ${session.menuList}" class="gt-service-menu nav tab-pane fade" th:id="'menu-' + ${item.getMenuId()}">
            <li th:each="level1: ${item.getChildList()}">
                <a href="#">
                    <i th:class="${level1.getMenuIcon()}"></i>
                    <span th:text="${level1.getMenuName()}"></span>
                </a>
                <ul class="second-menu nav">
                    <li th:each="level2 : ${level1.getChildList()}">
                        <a th:href="${level2.getMenuUrl()}" target="cloud-iframe">
                            <i th:class="${level2.getMenuIcon()}"></i>
                            <span th:text="${level2.getMenuName()}"></span>
                        </a>
                    </li>

                </ul>
            </li>
        </ul>
    </nav>

    <iframe name="cloud-iframe" th:src="@{welcome}">

    </iframe>

</article>

<div id="modify-dialog-id" style="display: none">
    <form id="modify-form-id" action="modifyUserInfo" method="post">
        <div class="form-group">
            <span th:text="#{user.name}"></span>
            <input name="userName" class="form-control" th:placeholder="#{user.name.plchldr}" pattern="^.{4,}$">
        </div>

        <div class="form-group">
            <span th:text="#{user.nick}"></span>
            <input name="niceName" class="form-control" th:placeholder="#{user.nice.name.plchldr}"  pattern="^.+$">
        </div>

        <div class="form-group">
            <span th:text="#{user.mobile}"></span>
            <input name="mobile" class="form-control" th:placeholder="#{user.mobile.plchldr}" type="number" pattern="^[0-9]{11}$">
        </div>

        <div class="form-group">
            <span th:text="#{user.email}"></span>
            <input name="email" class="form-control" th:placeholder="#{user.email.plchldr}" type="email"
                   pattern="^.+$">
        </div>
    </form>
</div>

</body>
</html>